<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles/format.css">
    <style>
        /* tr:nth-child(odd) {
            background-color: #ffc;
        }
        tr:nth-child(even) {
            background-color: #fff;
        } */
    </style>
</head>
<body>
    <table>
        <caption>Itinerary</caption>
        <thead>
            <tr>
                <th>When</th>
                <th>When</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>June 9th</td>
                <td>Portland,<abbr title="Oregon">OR</abbr></td>
            </tr>
            <tr>
                <td>June 10th</td>
                <td>Seattle,<abbr title="Washington">WA</abbr></td>
            </tr>
            <tr>
                <td>June 12th</td>
                <td>Sacramento,<abbr title="California">CA</abbr></td>
            </tr>
        </tbody>
    </table>
    <script>
        window.onload = function() {
            stripeTables();
            displayAbbreviations();
            highlightRows();
        }

        function stripeTables() {//斑马线颜色
            if(!document.getElementsByTagName) {
                return false;
            }
            var tables = document.getElementsByTagName("table");
            var odd,rows;
            for(var i = 0; i < tables.length; i++) {
                odd = false;
                rows = tables[i].getElementsByTagName("tr");
                for(var j = 0; j < rows.length; j++) {
                    if(odd == true) {
                        addClass(rows[j],"odd")
                        odd = false;
                    }else {
                        odd = true;
                    }
                }
            } 
        }

        function displayAbbreviations() {//遍历abbr元素总结并添加末尾
            if(!document.getElementsByTagName || !document.createElement
            || !document.createTextNode) {
                return false;
            }
            //取得所有缩略词
            var abbreviations = document.getElementsByTagName("abbr");
            if(abbreviations.length < 1) {
                return false;
            }
            var defs = new Array();
            //遍历所有缩略词
            for(var i = 0; i < abbreviations.length; i++) {
                var current_abbr = abbreviations[i];
                if(current_abbr.childNodes.length < 1) {
                    continue;
                }
                var definition = current_abbr.getAttribute("title");
                var key = current_abbr.lastChild.nodeValue;
                defs[key] = definition;
            }
            //创建定义列表
            var dlist = document.createElement("dl");
            //loop through the definitions
            for(key in defs) {
                var definition = defs[key];
                //创建定义标题
                var dtitle = document.createElement("dt");
                var dtitle_text = document.createTextNode(key);
                dtitle.appendChild(dtitle_text);
                //创建定义描述
                var ddesc = document.createElement("dd");
                var ddesc_text = document.createTextNode(definition);
                ddesc.appendChild(ddesc_text);
                dlist.appendChild(dtitle);
                dlist.appendChild(ddesc);
            }
            if(dlist.childNodes.length < 1) {
                return false;
            }
            //创建标题
            var header = document.createElement("h2");
            var header_text = document.createTextNode("abbreviations");
            header.appendChild(header_text);
            //把标题添加到页面主体
            document.body.appendChild(header);
            //把定义列表添加到页面主体
            document.body.appendChild(dlist);
        }
    
        function highlightRows() {//鼠标悬浮字体变粗
            if(!document.getElementsByTagName) {
                return false;
            }
            var rows = document.getElementsByTagName("tr");
            for(var i = 0; i < rows.length; i++) {
                rows[i].onmouseover = function() {
                    this.style.fontWeight = "bold";
                }
                rows[i].onmouseout = function() {
                    this.style.fontWeight = "normal";
                }
            }
        }
        
        function addClass(element,value) {//给某个元素追加属性
            if(!element.className) {
                element.className = value;
            }else {
                newClassName = element.className;
                newClassName += " ";
                newClassName += value;
                element.className = newClassName;
            }
        }
    
    
    </script>
</body>
</html>